

/*@media (max-width: 1220px){
	.container { position: absolute; width: 96%; margin-left: 2%; min-width: 800px; }
}
@media (min-width: 1220px){
	.container { position: absolute; left: 50%; width: 1200px; margin-left: -600px; }
}*/



article { width: 100%;  }
article.gymSelect { height: 28px; }
label.gymName { font-size: 20px; font-weight: bolder; color: #333; }
input[name=gymName] { width: 500px; height: 32px; border-style: inset;  }
button#btn_gymName { width: 60px; height: 32px; background-color: dodgerblue; border-radius: 5px; color: white; text-shadow: -1px -1px 1px #333; }
.gymTitle span:nth-child(1) { font-size: 32px; font-weight: bolder; color: dodgerblue; text-shadow: 1px 1px 3px #333;  }
.gymTitle span:nth-child(2) { font-size: 24px; font-weight: bolder; color: dodgerblue; margin-left: 20px; }

article.charts { margin-top: 20px; }
article.charts .line { width: 100%; margin-top: 10px; }
article.charts section { height: 23vw; border: 1px solid darkorange; font-size: 14px; font-weight: bolder;  }
aside.chartTitle { width: 80px; height: 30px; background-color: darkorange; font-size: 18px; line-height: 30px; text-align: center; border-radius: 5px; color: white; font-weight: bolder;}

/*性别分析图*/
section.userSex { width: 22%; }
section.userSex > div { width: 100%; margin-top: 2vw; }
section.userSex > .sexIcon { margin-top: 12%; }
section.userSex > .sexIcon img { width: 25%;  }
section.userSex > .percent_line { width: 80%; margin-left: 10%; height: 1vw; background-color: #be5108; margin-top: 10%; }
section.userSex > .percent_line > .first_percent { width: 20%; height: 1vw; background-color: #1d4999; }

/*BMI分析图*/
section.userBMI { width: 32%; font-size: 0.8vw;}
section.userBMI > .line { height: 40%; }
section.userBMI .bmi_bom { width: 18%; height: 80%; }
section.userBMI .bmi_bom :nth-child(1) { width: 100%; margin-left: 10%; height: 30%; text-align: center; overflow: visible;  }
section.userBMI .bmi_bom :nth-child(2) { width: 40%; margin-left: 30%; height: 60%;  }
section.userBMI .bom1 { background-color: #c23531 }
section.userBMI .bom2 { background-color: #2f4554 }
section.userBMI .bom3 { background-color: #61a0a8 }
section.userBMI .bom4 { background-color: #d48265 }
section.userBMI .bmi_data { width: 32%; height: 40%; margin-top: 5%; text-align: center; }
section.userBMI .bim_data :nth-child(1) {}
section.userBMI .bim_data :nth-child(2) {}

/*年龄分析图*/
section.userAge { width: 44%; }
section.userAge > .line { width: 100%; height: 80%; }
section.userAge > .line > div.chart { width: 65%; height: 100%;  }
section.userAge > .line > div.chart_data { width: 35%; height: 100%;  }
section.userAge > .line > div.chart_data > div { width: 50%; height: 80%; }
section.userAge .chart_data > div > div { width: 80%; height: 2vw; line-height: 2vw; text-align: center; color: white; }
section.userAge .chart_data > div > div:nth-child(1) {background-color: #c23531;}
section.userAge .chart_data > div > div:nth-child(2) {background-color: #2f4554;}
section.userAge .chart_data > div > div:nth-child(3) {background-color: #61a0a8;}
section.userAge .chart_data > div > div:nth-child(4) {background-color: #d48265;}
section.userAge .chart_data > div > div:nth-child(5) {background-color: #91c7ae;}
section.userAge .chart_data > div > div:nth-child(6) {background-color: #749f83;}
/*'#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83'*/


/*身高分析图*/
section.userHeight { width: 49%; position: relative; }
section.userHeight > div.chart { width: 100%; height: 90%; }
section.userHeight > aside.chartTitle { position: absolute; right: 0; bottom: 0; width: 30px; height: 80px; line-height: 40px;}

/*体重分析图*/
section.userWeight { width: 50%; position: relative; }
section.userWeight > div.chart { width: 100%; height: 90%; }
section.userWeight > aside.chartTitle { position: absolute; right: 0; bottom: 0; width: 30px; height: 80px; line-height: 40px;}

@media (max-width: 1200px){
	article.gymSelect { height: 36px; }
	label.gymName { font-size: 28px; font-weight: bolder; color: #333; }
	input[name=gymName] { width: 400px; height: 40px; border-style: inset;  }
	button#btn_gymName { width: 90px; height: 40px;  }
	article > .line {width: 60vw; flex-flow: row wrap; justify-content: center;  }
	article > .line > section { margin-left: 10px; margin-top: 10px; height: 36vw;}
	section.userSex { width: 34vw; }
	section.userBMI { width: 45vw; }
	section.userAge { width: 80vw; }
	section.userHeight { width: 80vw; }
	section.userWeight { width: 80vw; }
}